import React from 'react';
import {
  TextInput,
  View,
  StyleSheet,
  Text,
  TouchableWithoutFeedback,
} from 'react-native';
import PropTypes from 'prop-types';
import {getRealSize} from '../utils';
import FAIcon from 'react-native-vector-icons/FontAwesome5';

export default class InputItem extends React.Component {
  static propsTypes = {
    onChange: PropTypes.func.isRequired,
    value: PropTypes.string.isRequired,
    isRequire: PropTypes.bool,
    placeholder: PropTypes.string,
    editable: PropTypes.bool,
    arrow: PropTypes.bool,
    onFocus: PropTypes.func,
    multiline: PropTypes.bool,
    lines: PropTypes.number,
    password: PropTypes.bool,
    icon: PropTypes.bool,
  };
  static defaultProps = {
    onChange: () => {},
    value: '',
    isRequire: false,
    placeholder: '',
    editable: true,
    arrow: false,
    password: false,
    onFocus: () => {},
  };

  state = {secureTextEntry: false};

  componentDidMount() {
    this.setState({secureTextEntry: this.props.password});
  }

  onChange = value => {
    this.props.onChange(value);
  };

  onSelected = () => {
    const {editable, onFocus} = this.props;
    if (!editable) {
      onFocus();
    }
  };

  render() {
    const {
      isRequire,
      editable,
      arrow,
      style,
      icon,
      placeholder,
      value,
      onFocus,
      multiline,
      password,
    } = this.props;
    return (
      <TouchableWithoutFeedback onPress={this.onSelected}>
        <View style={Style.container}>
          <TextInput
            style={[
              Style.input,
              style,
              multiline
                ? {
                    paddingVertical: getRealSize(8),
                    textAlignVertical: 'top',
                  }
                : {height: getRealSize(44)},
            ]}
            editable={editable}
            value={value}
            onFocus={e => onFocus(e)}
            onPressIn={() => onFocus()}
            placeholder={placeholder}
            secureTextEntry={this.state.secureTextEntry}
            multiline={multiline}
            placeholderTextColor="#999999"
            underlineColorAndroid={'transparent'}
            onChangeText={this.onChange}
          />
          <View style={Style.extra}>
            {password && (
              <FAIcon
                name={this.state.secureTextEntry ? 'eye-slash' : 'eye'}
                color="#757575"
                size={getRealSize(14)}
                onPress={() =>
                  this.setState({
                    secureTextEntry: !this.state.secureTextEntry,
                  })
                }
              />
            )}
            {icon && (
              <FAIcon name={icon} color="#757575" size={getRealSize(14)} />
            )}
            {arrow && (
              <FAIcon
                name="caret-down"
                color="#757575"
                size={getRealSize(14)}
              />
            )}
            <View style={Style.icon}>
              {isRequire && <Text style={Style.require}>*</Text>}
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    );
  }
}

const Style = StyleSheet.create({
  container: {
    borderColor: '#E8E8E8',
    borderWidth: StyleSheet.hairlineWidth,
    borderRadius: getRealSize(4),
    backgroundColor: '#f6f6f6',
    paddingHorizontal: getRealSize(10),
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  input: {
    padding: 0,
    flex: 1,
    backgroundColor: 'transparent',
    color: 'black',
  },
  extra: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  require: {
    color: 'red',
    textAlign: 'center',
  },
  icon: {
    width: getRealSize(14),
    height: getRealSize(14),
  },
});
